<template>
  <view>
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- tabs 结构 -->
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#eb4450" bar-width="150"></u-tabs>
    <!-- tabs 对应的内容 -->
    <view v-if="current === 0" class="goods_list">
        <!-- 点击可以跳转到商品详情页面 -->
        <navigator v-for="item in goods" :key="item.goods_id" :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`">
            <!-- 左边的图片 -->
            <view class="goods-img-wrap">
                <u-image width="191" height="191" :src="item.goods_small_logo || 'https://img2.baidu.com/it/u=1800023025,2148097835&fm=253&fmt=auto&app=138&f=JPEG?w=675&h=500'"></u-image>
            </view>
            <!-- 右边的内容 -->
            <view class="goods-info-wrap">
                <!-- 商品名称 -->
                <view class="goods_name u-line-2">{{item.goods_name}}</view>
                <!-- 商品价格 -->
                <view class="goods_price">￥{{item.goods_price}}</view>
            </view>
        </navigator>
    </view>
    <view v-if="current === 1">销量的列表</view>
    <view v-if="current === 2">价格的列表</view>
  </view>
</template>

<script>

export default {
    data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格'
				}],
				current: 0,
                // 商品列表
                goods:[],
			}
		},
        // 页面开始加载  就可以获得 url传过来的参数
        onLoad(options){
            // console.log(options);
            // 定义一个全局变量-接口的参数  方便获取和后面的修改
            this.params = {
                // 接口文档要求写的参数
                query: '', //string	关键字
                // cid: options.cid, //string	分类id
                cid:'',
                pagenum: 1, //number	页码
                pagesize: 10 //number	页容量
            };
            // 判断一下  如果 options.cid  有值   使用cid 获取商品列表数据
              if (options.cid) {
                this.params.cid = options.cid;
              }
              // 判断一下  如果 options.query 有值  使用 query获取商品列表数据
              if (options.query) {
                this.params.query = options.query;
              }
            // 获取商品列表数据
            this.getGoodsList()
        },
		methods: {
			change(index) {
				this.current = index;
			},
            // 获取商品列表的数据
            async getGoodsList(){
                const result = await this.$u.get('/goods/search',this.params)
                // console.log(result);
                // this.goods = result.message.goods
                // 将新 旧数据合并在一起
                this.goods = [...this.goods, ...result.message.goods]
                // 拿到总条数做全局变量
                this.total = result.message.total

            },
            // 滚动条触底事件 上拉页面事件 加载下一页
            onReachBottom() {
            // console.log(this.total);
            // 用当前数据条数 和 总数据条数做判断
            if(this.goods.length < this.total){
                // 如果当前条数小于总条数  则表示还有数据
                // 页码加一
                this.params.pagenum++
                // 再发请求拿数据
                this.getGoodsList()
                // 再回到getGoodsList函数里面 将新获取的数据与旧的数据合并起来 --- 数组解构
            }else{
                // 否则就没有数据 做个提示
                uni.showToast({
                    title:'没有数据啦',
                    icon:'none'
                })
            }

            },
             // 下拉刷新事件
            //  要去pages.json里面打开该事件  "enablePullDownRefresh": true
           async onPullDownRefresh() {
                // console.log('onPullDownRefresh');
                // 重置页码
                this.params.pagenum = 1
                // 重置商品列表
                this.goods = []
                // 重新发送请求
               await this.getGoodsList()
                // 停止加载中 效果 （必须要等请求结束后 才停止）
                uni.stopPullDownRefresh()
            },
		}
}
</script>

<style lang="scss">
.goods_list {
  navigator {
    display: flex;
    .goods-img-wrap {
      flex: 1;
      padding: 15rpx;
    }
    .goods-info-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>